<template>
  <div class="edit-pwd">
    <top-header>
      <template #right>
        <top-btn-one v-model="loading" @click="submit">保存</top-btn-one>
      </template>
    </top-header>

    <div class="common-list-body-3">
      <van-tabs v-model="activeName" line-width="96" line-height="2" class="tabs-div" @change="tabchange">
        <van-tab title="旧密码验证修改" name="pwd">
          <div class="form">
            <div class="field-div">
              <van-field v-model="oldPassword" :type="plaintext_0 ? '' : 'password'" placeholder="请输入旧密码" @focus="focus" clearable @click-right-icon="plaintext_0 = !plaintext_0">
                <template #right-icon>
                  <span class="iconfont" :class="{ iconxianshi: plaintext_0, iconbiyan: !plaintext_0 }"></span>
                </template>
              </van-field>
            </div>
            <div class="field-div">
              <van-field v-model="newPassword" :type="plaintext_1 ? '' : 'password'" placeholder="请输入新密码" @focus="focus" clearable @click-right-icon="plaintext_1 = !plaintext_1">
                <template #right-icon>
                  <span class="iconfont" :class="{ iconxianshi: plaintext_1, iconbiyan: !plaintext_1 }"></span>
                </template>
              </van-field>
            </div>
          </div>
        </van-tab>
        <van-tab title="手机号验证修改" name="mobile">
          <div class="form">
            <div class="field-div">
              <van-field v-model="newPassword" :type="plaintext_2 ? '' : 'password'" placeholder="请输入新密码" clearable @focus="focus" @click-right-icon="plaintext_2 = !plaintext_2">
                <template #right-icon>
                  <span class="iconfont" :class="{ iconxianshi: plaintext_2, iconbiyan: !plaintext_2 }"></span>
                </template>
              </van-field>
            </div>

            <div class="field-div">
              <van-field v-model="code" placeholder="请输入验证码" type="digit" maxlength="6" clearable @focus="focus">
                <template #button>
                  <van-button size="small" type="primary" @click="getSms" v-show="!counting">获取验证码</van-button>
                  <div class="countdown" v-show="counting">重新获取(<van-count-down ref="countDown" :time="60000" @finish="countDownFinish" :auto-start="false" format="ss" />)S</div>
                </template>
              </van-field>
            </div>
          </div>
        </van-tab>
      </van-tabs>
      <div class="error">{{ errmsg }}</div>
      <!-- <div class="form">
        <div class="field-div username">
          <van-field v-model="mobile" type="digit" placeholder="请输入新手机号" clearable @focus="focus"></van-field>
        </div>

        <div class="field-div">
          <van-field v-model="code" placeholder="请输入验证码" type="digit" maxlength="6" clearable @focus="focus">
            <template #button>
              <van-button size="small" type="primary" @click="getSms" v-show="!counting">获取验证码</van-button>
              <div class="countdown" v-show="counting">重新获取(<van-count-down ref="countDown" :time="60000" @finish="countDownFinish" :auto-start="false" format="ss" />)S</div>
            </template>
          </van-field>
        </div>

        <div class="error">{{ errmsg }}</div>
      </div> -->
    </div>
  </div>
</template>

<script lang="ts">
import { Component } from "vue-property-decorator";
import Base from "@/utils/base";
import TopHeader from "@/components/TopHeader.vue";
import TopBtnOne from "@/components/TopBtnOne.vue";
import { Field, CountDown, Button, Tabs, Tab } from "vant";
import Api from "@/api";

@Component({
  name: "EditPwd",
  components: {
    TopHeader,
    TopBtnOne,
    VanField: Field,
    VanCountDown: CountDown,
    VanButton: Button,
    VanTabs: Tabs,
    VanTab: Tab
  }
})
export default class EditPwd extends Base {
  private code = "";
  private uuid = "";
  private errmsg = "";
  // 验证码倒计时是否正在执行
  private counting = false;
  private loading = false;
  // 验证码是否发送过
  private sended = false;
  private oldPassword = "";
  private newPassword = "";
  private activeName = "pwd";

  // 输入框眼睛模式
  private plaintext_0 = false;
  private plaintext_1 = false;
  private plaintext_2 = false;

  private focus() {
    this.errmsg = "";
  }

  /**
   * 发送验证码
   */
  private async getSms() {
    if (!this.currentUser.phonenumber || !this.$tools.checkPhone(this.currentUser.phonenumber)) {
      this.errmsg = "用户手机号码有误，请确认是否正确";
      return;
    }
    const res = await Api.CaptchaSMS({ phonenumber: this.currentUser.phonenumber });
    if (res.code === 200) {
      this.uuid = res.uuid;
      // 开始倒计时
      this.sended = true;
      this.counting = true;
      // this.code = res.verifyCode;
      (this.$refs.countDown as any).start();
    } else {
      this.errmsg = res.msg;
    }
  }

  /**
   * 验证码倒计时结束事件
   */
  private countDownFinish() {
    this.counting = false;
    (this.$refs.countDown as any).reset();
  }

  private check() {
    if (this.activeName === "pwd") {
      if (!this.oldPassword) {
        this.errmsg = "请输入旧密码";
        return false;
      }

      if (!this.newPassword) {
        this.errmsg = "请输入新密码";
        return false;
      }
    } else {
      if (!this.currentUser.phonenumber || !this.$tools.checkPhone(this.currentUser.phonenumber)) {
        this.errmsg = "请输入正确的手机号码";
        return false;
      }
      if (!this.sended) {
        this.errmsg = "请先发送验证码";
        return false;
      }
      if (this.sended && !this.code) {
        this.errmsg = "请输入验证码";
        return false;
      }
    }

    return true;
  }

  private tabchange() {
    this.errmsg = "";
    this.code = "";
    this.oldPassword = "";
    this.newPassword = "";
  }

  /**
   * 表单提交
   */
  private async submit() {
    if (!this.loading && this.check()) {
      this.loading = true;
      this.errmsg = "";
      const toast = this.$toast.loading({
        duration: 0, // 持续展示 toast
        forbidClick: true,
        message: "正在提交..."
      });
      let res: any = {};

      if (this.activeName === "pwd") {
        res = await Api.UpdatePwdByOld({ oldPassword: this.oldPassword, newPassword: this.newPassword });
      } else {
        res = await Api.UpdatePwdByCode({
          phonenumber: this.currentUser.phonenumber,
          password: this.newPassword,
          code: this.code,
          uuid: this.uuid
        });
      }

      toast.clear();
      this.loading = false;

      if (res.code === 200) {
        this.$toast.success({
          message: "修改成功",
          onClose: () => {
            this.$router.go(-1);
          }
        });
      } else {
        this.errmsg = res.msg;
      }
    }
  }
}
</script>

<style lang="less" scoped>
.edit-pwd {
  background-color: white;
  // .common-list-body-3 {
  //   padding: 0 26px;
  // }
  .form {
    overflow: hidden;
    padding: 0 26px;
  }

  .tabs-div {
    /deep/.van-tabs__wrap {
      padding: 0 30px;
      border-bottom: 1px solid #d8d8d8;

      .van-tab {
        color: #8b8f98;
      }

      .van-tab--active {
        color: #65b0fb;
      }

      .van-tabs__line {
        background-color: #65b0fb;
      }
    }
  }

  .field-div {
    display: flex;
    align-items: center;
    height: 39px;
    background: rgba(132, 144, 163, 0.07);
    border-radius: 4px;
    margin-top: 16px;
    .van-cell {
      background: transparent;
      padding-left: 10px;
      padding-right: 5px;
      line-height: 0px;

      .van-button--small {
        width: 88px;
        height: 29px;
        background: #65b0fb;
        border-radius: 4px;
        border: 0;
      }

      /deep/.van-field__control {
        color: #283d6a;
      }
    }
    /deep/.van-icon-clear {
      padding-right: 16px;
    }
  }

  .countdown {
    font-size: 12px;
    color: #a6afc0;
    padding-right: 5px;
    display: flex;
    line-height: 180% !important;
    .van-count-down {
      color: #a6afc0;
    }
  }

  .error {
    color: #d5001c;
    margin-top: 10px;
    text-align: center;
    height: 20px;
    font-size: 12px;
    line-height: 20px;
  }
}
</style>
